<template>
  <div class="app-container">
    <el-row :gutter="5">
      <el-col :span="12">
        <el-card style="width: 100%">
          <p class="pinformation">搜索条件</p>
          <el-form label-width="80" ref="queryRef" :model="queryParams">
            <el-row>
              <el-col :span="5">
                <el-form-item label="检测类别：" prop="jclbId">
                  <el-select v-model="queryParams.jclbId" placeholder="请选择检测类别" clearable filterable>
                    <el-option v-for="item in jclbList" :key="item.jclbId" :label="item.jclbName" :value="item.jclbId" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="检测项目：" prop="jcxmName">
                  <el-input maxlength="100" clearable placeholder="请输入检测项目" v-model="queryParams.jcxmName"
                    @keyup.enter="handleQuery" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="组别：" prop="groupName" label-width="55">
                  <el-input maxlength="100" clearable placeholder="请输入组别" v-model="queryParams.groupName"
                    @keyup.enter="handleQuery" />
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="方法编号：" prop="methodCode">
                  <el-input maxlength="100" clearable placeholder="输入方法编号" v-model="queryParams.methodCode"
                    @keyup.enter="handleQuery" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-row justify="center">
                  <el-button type="success" @click="handleQuery">搜索</el-button>
                  <el-button class="business resetBtn" @click="resetQuery">重置</el-button>
                </el-row>
              </el-col>
            </el-row>
          </el-form>
          <el-row>
            <p class="pinformation">检测项目单价列表</p>
            <p class="totalStyle">共 {{ total }} 条数据</p>
          </el-row>
          <el-table ref="mainTableRef" :data="priceList" v-loading="loading">
            <el-table-column label="检测类别" prop="jclbName" align="center" width="100" />
            <el-table-column label="检测项目" prop="jcxmName" align="center" width="100">
              <template #default="scope">
                <span v-html="proxy.getSupAndSub(scope.row.jcxmName)"></span>
              </template>
            </el-table-column>
            <el-table-column label="组别" prop="groupName" align="center" width="100" />
            <el-table-column label="方法编号" prop="methodCode" align="center" width="180" />
            <el-table-column label="方法名称" prop="methodName" align="center" width="180" :show-overflow-tooltip="true" />
            <el-table-column label="采样单价" prop="cyPrice" align="center">
              <template #default="scope">
                <el-input v-model="scope.row.cyPrice" clearable maxlength="100"
                  oninput="value=value.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')"
                  @blur="scope.row.cyPrice = $event.target.value" @change="submit(scope.row)" />
              </template>
            </el-table-column>
            <el-table-column label="分析单价" prop="analysePrice" align="center">
              <template #default="scope">
                <el-input clearable maxlength="100" v-model="scope.row.analysePrice"
                  oninput="value=value.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')"
                  @blur="scope.row.analysePrice = $event.target.value" @change="submit(scope.row)" />
              </template>
            </el-table-column>
            <el-table-column label="其他单价" prop="otherPrice" align="center">
              <template #default="scope">
                <el-input clearable maxlength="100" v-model="scope.row.otherPrice"
                  oninput="value=value.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')"
                  @blur="scope.row.otherPrice = $event.target.value" @change="submit(scope.row)" />
              </template>
            </el-table-column>
            <!-- <el-table-column label="合计单价" prop="sumPrice" align="center" /> -->
          </el-table>
          <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize" @pagination="getList" />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card style="width: 100%">
          <el-row>
            <p class="pinformation">方法数量规则</p>
            <p class="totalStyle">共 {{ totalCount }} 条数据</p>
            <el-row style="margin-bottom: 5px; margin-left: 20px">
              <el-button type="success" link icon="Plus" @click="addMethodCount">新增</el-button>
            </el-row>
          </el-row>
          <el-table ref="sub1TableRef" :data="priceCountList" v-loading="loadingCount" height="150px">
            <el-table-column label="检测类别" prop="jclbName" align="center" width="150" />
            <el-table-column label="组别" prop="groupName" align="center" width="100" />
            <el-table-column label="方法编号" prop="methodCode" align="center" width="150" />
            <el-table-column label="方法名称" prop="methodName" align="center" :show-overflow-tooltip="true" width="150" />
            <el-table-column label="数量条件" prop="jcxmCondition" align="center">
              <template #default="scope">
                <dict-tag :options="sys_condition" :value="scope.row.jcxmCondition" />
              </template>
            </el-table-column>
            <el-table-column label="数量" prop="jcxmCount" align="center" />
            <el-table-column label="单价条件" prop="priceCondition" align="center">
              <template #default="scope">
                <dict-tag :options="sys_price" :value="scope.row.priceCondition" />
              </template>
            </el-table-column>
            <el-table-column label="单价" prop="price" align="center" />
            <el-table-column label="最高单价" prop="topPrice" align="center" />
            <el-table-column label="操作" align="center" width="150" fixed="right">
              <template #default="scope">
                <el-button link icon="EditPen" @click="editPriceCountRuleRow(scope.row)">编辑</el-button>
                <el-button link icon="Delete" @click="delPriceCountRuleRow(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination :total="totalCount" v-model:page="queryParamsCount.pageNum"
            v-model:limit="queryParamsCount.pageSize" @pagination="getPriceCountList" />

          <!-- ------------------------项目方法包规则--------------------------- -->
          <el-row style="margin-top: 10px">
            <p class="pinformation">项目方法包规则</p>
            <p class="totalStyle">共 {{ totalWrapRule }} 条数据</p>
            <el-row style="margin-bottom: 5px; margin-left: 20px">
              <el-button type="success" link icon="Plus" @click="addWarpRule">新增</el-button>
            </el-row>
          </el-row>
          <el-table ref="sub2TableRef" :data="priceWrapRuleList" v-loading="loadingWrapRule">
            <el-table-column label="项目方法包" prop="packageName" align="center" />
            <el-table-column label="数量条件" prop="jcxmCondition" align="center">
              <template #default="scope">
                <dict-tag :options="sys_condition" :value="scope.row.jcxmCondition" />
              </template>
            </el-table-column>
            <el-table-column label="数量" prop="jcxmCount" align="center" />
            <el-table-column label="单价条件" prop="priceCondition" align="center">
              <template #default="scope">
                <dict-tag :options="sys_price" :value="scope.row.priceCondition" />
              </template>
            </el-table-column>
            <el-table-column label="单价" prop="price" align="center" />
            <el-table-column label="最高单价" prop="topPrice" align="center" />
            <el-table-column label="操作" align="center" width="150">
              <template #default="scope">
                <el-button link icon="EditPen" @click="editPriceWrapRuleRow(scope.row)">编辑</el-button>
                <el-button link icon="Delete" @click="delPriceWrapRuleRow(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- ------------------------其它费用--------------------------- -->
          <el-row style="margin-top: 10px">
            <p class="pinformation">其它费用</p>
            <p class="totalStyle">共 {{ totalCostRule }} 条数据</p>
            <el-row style="margin-bottom: 5px; margin-left: 20px">
              <el-button type="success" link icon="Plus" @click="addCost">新增</el-button>
            </el-row>
          </el-row>
          <el-table ref="sub3TableRef" :data="priceCostRuleList" v-loading="loadingCostRule">
            <el-table-column label="费用名目" prop="otherName" align="center" />
            <el-table-column label="单价" prop="price" align="center" />
            <el-table-column label="操作" align="center" width="150">
              <template #default="scope">
                <el-button link icon="EditPen" @click="editPriceCostRow(scope.row)">编辑</el-button>
                <el-button link icon="Delete" @click="delPriceCostRow(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <!-- 方法数量规则弹框 -->
    <el-dialog :class="'el-dialog-theme3'" append-to-body draggable :close-on-click-modal="false"
      v-model="countOpen" :title="countTitle" @close="countDialogClose" width="950">
      <el-form label-width="80" ref="countRef" :model="form" :rules="rules">
        <el-row>
          <el-col :span="8">
            <el-form-item label="检测类别：" prop="jclbId">
              <el-select v-model="form.jclbId" placeholder="请选择检测类别" filterable clearable @change="jclbIdChange">
                <el-option v-for="item in jclbList" :key="item.jclbId" :label="item.jclbName" :value="item.jclbId" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="检测方法：" prop="methodName">
              <el-select v-model="form.methodName" placeholder="请选择检测方法" filterable clearable remote
                :remote-method="remoteMethod" :loading="selectLoading" remote-show-suffix @change="methodNameChange">
                <el-option v-for="item in methodList" :key="item.methodId" :label="item.methodCode + '' + item.methodName"
                  :value="item.methodId">
                  <el-tooltip class="box-item" effect="customized" placement="right">
                    <template #content>
                      {{ item.methodCode + "" + item.methodName }}
                    </template>
                    <div style="
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                      ">
                      {{ item.methodCode + "" + item.methodName }}
                    </div>
                  </el-tooltip>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="检测组别：" prop="groupName">
              <el-select v-model="form.groupName" placeholder="请选择检测组别" style="width: 100%" clearable filterable remote
                :remote-method="remoteGroup" :loading="selectGroupLoading" remote-show-suffix @change="groupNameChange">
                <el-option v-for="item in groupList" :key="item.groupId" :label="item.groupName" :value="item.groupId" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <el-form-item label="数量条件：" prop="jcxmCondition">
              <el-select v-model="form.jcxmCondition" placeholder="数量条件" clearable filterable>
                <el-option v-for="dict in sys_condition" :key="dict.value" :label="dict.label"
                  :value="parseInt(dict.value)"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="数量：" prop="jcxmCount" label-width="60">
              <el-input maxlength="100" clearable placeholder="请输入数量" v-model="form.jcxmCount" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="单价条件：" prop="priceCondition">
              <el-select v-model="form.priceCondition" placeholder="单价条件" clearable filterable>
                <el-option v-for="dict in sys_price" :key="dict.value" :label="dict.label"
                  :value="parseInt(dict.value)"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="单价：" prop="price" label-width="60">
              <el-input maxlength="100" clearable placeholder="请输入单价" v-model="form.price" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="最高单价：" prop="topPrice">
              <el-input maxlength="100" clearable placeholder="最高单价" v-model="form.topPrice" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="success" @click="saveCount">保 存</el-button>
          <el-button type="danger" @click="countOpen = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 项目方法包规则弹框 -->
    <el-dialog :class="'el-dialog-theme3'" append-to-body draggable :close-on-click-modal="false"
      v-model="wrapOpen" :title="wrapTitle" @close="wrapDialogClose" width="950">
      <el-form label-width="80" ref="wrapRef" :model="wrapForm" :rules="wrapRules">
        <el-row>
          <el-col :span="15">
            <el-form-item label="项目方法包：" prop="packageId" label-width="100">
              <el-select v-model="wrapForm.packageId" placeholder="请选择项目方法包" clearable filterable style="width: 100%">
                <el-option v-for="item in packageList" :key="item.packageId" :label="item.packageName"
                  :value="item.packageId" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <el-form-item label="数量条件：" prop="jcxmCondition" label-width="100">
              <el-select v-model="wrapForm.jcxmCondition" placeholder="数量条件" clearable filterable>
                <el-option v-for="dict in sys_condition" :key="dict.value" :label="dict.label"
                  :value="parseInt(dict.value)"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="数量：" prop="jcxmCount" label-width="60">
              <el-input maxlength="100" clearable placeholder="请输入数量" v-model="wrapForm.jcxmCount" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="单价条件：" prop="priceCondition">
              <el-select v-model="wrapForm.priceCondition" placeholder="单价条件" clearable filterable>
                <el-option v-for="dict in sys_price" :key="dict.value" :label="dict.label"
                  :value="parseInt(dict.value)"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="单价：" prop="price" label-width="60">
              <el-input maxlength="100" clearable placeholder="请输入单价" v-model="wrapForm.price" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="最高单价：" prop="topPrice">
              <el-input maxlength="100" clearable placeholder="最高单价" v-model="wrapForm.topPrice" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="success" @click="saveWrap">保 存</el-button>
          <el-button type="danger" @click="wrapOpen = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 其它费用弹窗 -->
    <el-dialog :class="'el-dialog-theme3'" append-to-body draggable :close-on-click-modal="false"
      v-model="costOpen" :title="costTitle" @close="costDialogClose" width="950">
      <el-form label-width="80" ref="costRef" :model="costForm" :rules="costRules">
        <el-row>
          <el-col :span="15">
            <el-form-item label="费用名目：" prop="otherName">
              <el-input maxlength="100" clearable placeholder="请输入费用名目" v-model="costForm.otherName" />
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="单价：" prop="price" label-width="60">
              <el-input maxlength="100" clearable placeholder="请输入单价" v-model="costForm.price" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="success" @click="saveCost">保 存</el-button>
          <el-button type="danger" @click="costOpen = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="PriceRule">
import { listPriceConfig, priceConfigSave } from "@/api/system/priceConfig";
import {
  // 方法数量规则接口
  getMethodList,
  getGroupList,
  addCountList,
  getCountList,
  getCountRow,
  delCountRow,
  // 项目方法包接口
  addWrapList,
  getWrapList,
  getWrapRow,
  delWrapRow,
  // 其它费用接口
  addCostList,
  getCostList,
  getCostRow,
  delCostRow,
} from "@/api/price/priceRule";
import { allListJclb } from "@/api/store/jclb";
import { listAllPackage } from "@/api/store/package";
import { nextTick } from "vue";
const { proxy } = getCurrentInstance();
const { sys_condition, sys_price } = proxy.useDict(
  "sys_condition",
  "sys_price"
);
const queryParams = ref({ pageNum: 1, pageSize: 10 });
const priceList = ref([]);
const loading = ref(false);
const selectLoading = ref(false);
const selectGroupLoading = ref(false);
const total = ref(0);

// 方法数量规则变量
const queryParamsCount = ref({ pageNum: 1, pageSize: 10 });
const priceCountList = ref([]);
const loadingCount = ref(false);
const totalCount = ref(0);

// 项目方法包变量
const priceWrapRuleList = ref([]);
const loadingWrapRule = ref(false);
const totalWrapRule = ref(0);

// 其它费用变量
const priceCostRuleList = ref([]);
const loadingCostRule = ref(false);
const totalCostRule = ref(0);

//  ---------------------初始化数据-----------------------------
const jclbList = ref([]);
const methodList = ref([]);
const groupList = ref([]);
const packageList = ref([]);
allListJclb().then((res) => {
  jclbList.value = res.data;
});
listAllPackage().then((res) => {
  packageList.value = res.data;
});

// ----------------------左侧搜索函数---------------------------
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

function getList() {
  loading.value = true;
  listPriceConfig(queryParams.value).then((res) => {
    priceList.value = res.rows;
    total.value = res.total;
    loading.value = false;
  });
}

function submit(row) {
  priceConfigSave(row).then(() => {
    proxy.$modal.msgSuccess("保存成功");
    getList();
  });
}

getList();

// -----------------------右侧方法数量规则函数--------------------------
const countOpen = ref(false);
const countTitle = ref("");
const form = ref({});
const rules = ref({
  jclbId: [{ required: true, message: "检测类别不能为空", trigger: "blur" }],
  methodName: [
    { required: true, message: "检测方法不能为空", trigger: "blur" },
  ],
  // groupName: [{ required: true, message: "组别不能为空", trigger: "blur" }],
  jcxmCondition: [
    { required: true, message: "数量条件不能为空", trigger: "blur" },
  ],
  jcxmCount: [{ required: true, message: "数量不能为空", trigger: "blur" }],
  priceCondition: [
    { required: true, message: "单价条件不能为空", trigger: "blur" },
  ],
  price: [{ required: true, message: "单价不能为空", trigger: "blur" }],
});

function getPriceCountList() {
  loadingCount.value = true;
  getCountList(queryParamsCount.value).then((res) => {
    priceCountList.value = res.rows;
    totalCount.value = res.total;
    loadingCount.value = false;
  });
}

function remoteMethod(val) {
  if (form.value.jclbId) {
    if (!val) {
      methodList.value = [];
      return false;
    }
    selectLoading.value = true;
    getMethodList({ jclbId: form.value.jclbId, methodName: val }).then(
      (res) => {
        methodList.value = res.data;
        selectLoading.value = false;
      }
    );
  } else {
    methodList.value = [];
  }
}

function jclbIdChange() {
  form.value.methodName = "";
  form.value.groupName = "";
}

function methodNameChange(val) {
  form.value.groupName = "";
  if (val) {
    form.value.methodId = val;
  }
}

function groupNameChange(val) {
  if (val) {
    form.value.groupId = val;
  }
}

function remoteGroup(val) {
  if (form.value.methodId) {
    if (!val) {
      groupList.value = [];
      return false;
    }
    selectGroupLoading.value = true;
    getGroupList({ methodId: form.value.methodId, groupName: val }).then(
      (res) => {
        groupList.value = res.data;
        selectGroupLoading.value = false;
      }
    );
  } else {
    groupList.value = [];
  }
}

function addMethodCount() {
  countOpen.value = true;
  countTitle.value = "新增方法数量规则";
}

function editPriceCountRuleRow(row) {
  getCountRow(row.mPId).then((res) => {
    form.value = res.data;
    countOpen.value = true;
    countTitle.value = "编辑方法数量规则";
  });
}

function delPriceCountRuleRow(row) {
  proxy.$modal.confirm("是否确认该条删除数据项？").then(function () {
    delCountRow(row.mPId).then((res) => {
      proxy.$modal.msgSuccess("删除成功");
      getPriceCountList();
    });
  });
}

function saveCount() {
  proxy.$refs["countRef"].validate((valid) => {
    if (valid) {
      addCountList(form.value).then(() => {
        proxy.$modal.msgSuccess("保存成功");
        getPriceCountList();
        countOpen.value = false;
      });
    }
  });
}

function countDialogClose() {
  form.value = {}
}

getPriceCountList();
// -----------------------右侧项目方法包规则函数--------------------------
const wrapOpen = ref(false);
const wrapTitle = ref("");
const wrapForm = ref({});
const wrapRules = ref({
  packageId: [
    { required: true, message: "项目方法包不能为空", trigger: "blur" },
  ],
  jcxmCondition: [
    { required: true, message: "数量条件不能为空", trigger: "blur" },
  ],
  jcxmCount: [{ required: true, message: "数量不能为空", trigger: "blur" }],
  priceCondition: [
    { required: true, message: "单价条件不能为空", trigger: "blur" },
  ],
  price: [{ required: true, message: "单价不能为空", trigger: "blur" }],
});

function getPriceWrapRuleList() {
  loadingWrapRule.value = true;
  getWrapList().then((res) => {
    priceWrapRuleList.value = res.data;
    totalWrapRule.value = res.data.length;
    loadingWrapRule.value = false;
  });
}

function addWarpRule() {
  wrapOpen.value = true;
  wrapTitle.value = "新增项目方法包规则";
}

function editPriceWrapRuleRow(row) {
  getWrapRow(row.pPId).then((res) => {
    wrapForm.value = res.data;
    wrapOpen.value = true;
    wrapTitle.value = "编辑项目方法包规则";
  });
}

function delPriceWrapRuleRow(row) {
  proxy.$modal.confirm("是否确认该条删除数据项？").then(function () {
    delWrapRow(row.pPId).then((res) => {
      proxy.$modal.msgSuccess("删除成功");
      getPriceWrapRuleList();
    });
  });
}

function saveWrap() {
  proxy.$refs["wrapRef"].validate((valid) => {
    if (valid) {
      addWrapList(wrapForm.value).then(() => {
        proxy.$modal.msgSuccess("保存成功");
        getPriceWrapRuleList();
        wrapOpen.value = false;
      });
    }
  });
}

function wrapDialogClose() {
  wrapForm.value = {}
}

getPriceWrapRuleList();

// -----------------------右侧其它费用函数--------------------------
const costOpen = ref(false);
const costTitle = ref("");
const costForm = ref({});
const costRules = ref({
  otherName: [{ required: true, message: "费用名目不能为空", trigger: "blur" }],
  price: [{ required: true, message: "单价不能为空", trigger: "blur" }],
});
function getPriceCostList() {
  loadingCostRule.value = true;
  getCostList().then((res) => {
    priceCostRuleList.value = res.data;
    totalCostRule.value = res.data.length;
    loadingCostRule.value = false;
  });
}

function addCost() {
  costOpen.value = true;
  costTitle.value = "新增其它费用";
}

function editPriceCostRow(row) {
  getCostRow(row.oPId).then((res) => {
    costForm.value = res.data;
    costOpen.value = true;
    costTitle.value = "编辑其它费用";
  });
}

function delPriceCostRow(row) {
  proxy.$modal.confirm("是否确认该条删除数据项？").then(function () {
    delCostRow(row.oPId).then((res) => {
      proxy.$modal.msgSuccess("删除成功");
      getPriceCostList();
    });
  });
}

function saveCost() {
  proxy.$refs["costRef"].validate((valid) => {
    if (valid) {
      addCostList(costForm.value).then(() => {
        proxy.$modal.msgSuccess("保存成功");
        getPriceCostList();
        costOpen.value = false;
      });
    }
  });
}

function costDialogClose() {
  costForm.value = {}
}

getPriceCostList();

//  ------------------自适应高度----------------------------
const heightParams = ref([
  { tableName: "main", bottomHeight: 21 },
  { tableName: "sub2", bottomHeight: 250 },
  { tableName: "sub3", bottomHeight: 21 },
]);
watch(
  () => total.value,
  () => {
    if (total.value) {
      heightParams.value = [
        { tableName: "main", bottomHeight: 74 },
        { tableName: "sub2", bottomHeight: 250 },
        { tableName: "sub3", bottomHeight: 21 },
      ];
    } else {
      heightParams.value = [
        { tableName: "main", bottomHeight: 21 },
        { tableName: "sub2", bottomHeight: 250 },
        { tableName: "sub3", bottomHeight: 21 },
      ];
    }
    getTableHeight();
  }
);

function getTableHeight() {
  proxy.adaptiveHeight(proxy, heightParams.value);
}
onMounted(() => {
  nextTick(() => {
    getTableHeight();
    window.addEventListener("resize", getTableHeight);
  })
})
onUpdated(() => {
  nextTick(function () {
    getTableHeight();
  });
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", getTableHeight);
});
</script>

<style></style>
